import React from 'react'
import { PageContainer } from '@ant-design/pro-layout'
import { history } from 'umi';
import { Button, Popconfirm, Dropdown, Menu, Input, Card, Tag } from 'antd'
import { EllipsisOutlined, QuestionCircleOutlined, SearchOutlined } from '@ant-design/icons'
import { ProColumns } from '@ant-design/pro-table'
import ProTable, { TableDropdown } from '@ant-design/pro-table'
import { list, del as deleted } from '@/services/product/api'

const Order = () => {
  const valueEnum = {
    0: 'close',
    1: 'running',
    2: 'online',
    3: 'error',
  }

  const del = (record, action) => {
    deleted({ id: record.id }).then(result => {
      action.reload()
    })
  }

  const test = () => {
    let names = ['iPhone X', 'iPhone XS']

    let colors = ['黑色', '白色']

    let storages = ['64g', '256g']

    let storages2 = ['S', 'M', 'L']

    let combine = function (...chunks) {
      let res = []

      let helper = function (chunkIndex, prev) {
        let chunk = chunks[chunkIndex]
        let isLast = chunkIndex === chunks.length - 1
        for (let val of chunk) {
          let cur = prev.concat(val)
          if (isLast) {
            // 如果已经处理到数组的最后一项了 则把拼接的结果放入返回值中
            res.push(cur)
          } else {
            helper(chunkIndex + 1, cur)
          }
        }
      }

      // 从属性数组下标为 0 开始处理
      // 并且此时的 prev 是个空数组
      helper(0, [])

      return res
    }

    console.log(combine(names, colors, storages, storages2))
  }

  const tableListDataSource = []

  const creators = ['付小小', '曲丽丽', '林东东', '陈帅帅', '兼某某']

  for (let i = 0; i < 10; i += 1) {
    tableListDataSource.push({
      key: i,
      name: 'AppName',
      price: 299,
      count: 2,
      containers: Math.floor(Math.random() * 20),
      creator: creators[Math.floor(Math.random() * creators.length)],
      status: valueEnum[Math.floor(Math.random() * 10) % 4],
      createdAt: Date.now() - Math.floor(Math.random() * 2000),
      money: Math.floor(Math.random() * 2000) * i,
      progress: Math.ceil(Math.random() * 100) + 1,
      memo: i % 2 === 1 ? '很长很长很长很长很长很长很长的文字要展示但是要留下尾巴' : '简短备注文案',
      phone: '15625137509',
      addressee: '李三儿',
    })
  }

  const columns = [
    {
      title: '商品描述',
      dataIndex: 'name',
      render: _ => <a>{_}</a>,
      // 自定义筛选项功能具体实现请参考 https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel
      filterDropdown: () => (
        <div style={{ padding: 8 }}>
          <Input style={{ width: 188, marginBottom: 8, display: 'block' }} />
        </div>
      ),
      filterIcon: filtered => (
        <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />
      ),
    },
    {
      title: '商品价格',
      width: 100,
      dataIndex: 'price',
    },
    {
      align: 'center',
      title: '销量',
      dataIndex: 'sales_volume',
    },
    {
      title: '库存',
      dataIndex: 'total_stocks',
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
    },
    {
      title: '商品状态',
      dataIndex: 'status',
      render: status => {
        let color = status.code == 1 ? 'geekblue' : 'green';
        return (<Tag color={color}>
          {status.name}
        </Tag>)
      },
    },
    {
      title: '访问量',
      dataIndex: 'memo',
    },
    {
      title: '操作',
      width: 180,
      key: 'option',
      valueType: 'option',
      render: (text, record, index, action) => [
        <a key='link2'>编辑</a>,
        <Popconfirm title="Are you sure？" okText="Yes" cancelText="No" onConfirm={() => del(record, action)}>
          <Button type="link" danger>
            删除
          </Button>
        </Popconfirm>
      ],
    },
  ]

  return (
    <PageContainer ghost={true}>
      <ProTable
        columns={columns}
        request={async (
          // 第一个参数 params 查询表单和 params 参数的结合
          // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
          params,
          sort,
          filter,
        ) => {
          // 这里需要返回一个 Promise,在返回之前你可以进行数据转化
          // 如果需要转化参数可以在这里进行修改
          const msg = await list({
            page: params.current,
            pageSize: params.pageSize,
          })
          return {
            data: msg.content,
            // success 请返回 true，
            // 不然 table 会停止解析数据，即使有数据
            success: true,
            // 不传会使用 data 的长度，如果是分页一定要传
            total: msg.total_elements,
          }
        }}
        rowKey='key'
        pagination={{
          defaultPageSize: 10,
          showQuickJumper: true,
        }}
        search={{
          layout: 'vertical',
          defaultCollapsed: false,
        }}
        dateFormatter='string'
        toolBarRender={() => [
          <Button type='primary' key='primary' onClick={(event) => history.push('/product/add')}>
            创建商品
          </Button>
        ]}
      />
    </PageContainer>
  )
}

export default Order
